<template>
  <div class="document-preview-tools">
    <div class="document-preview-content">
      <div class="preview-header">
        <h3 class="document-name-preview">{{ configData.name || '文档预览' }}</h3>
        <div class="preview-tools">
          <el-tag v-for="toolId in selectedTools" :key="toolId" type="info" style="margin-right: 8px; margin-bottom: 8px">
            {{ getToolName(toolId) }}
          </el-tag>
        </div>
      </div>

      <!-- 预览编译区块内容 - 直接使用HTML显示 -->
      <!-- <div v-if="editorContent" v-html="editorContent" class="preview-editor-content"></div> -->
      
       <!-- 按创建时间排序的所有区块 -->
       <div class="preview-blocks">
        <div v-for="(block, index) in allOrderedBlocks" :key="index" class="preview-block">
          <!-- 根据块类型显示不同的内容 -->
          <template v-if="block.blockType === 'document'">
            <div :class="`preview-title preview-title-${block.type}`">{{ block.title }}</div>
            <div class="preview-content">{{ block.content }}</div>
          </template>
          
          <template v-else-if="block.blockType === 'parameter'">
            <div class="preview-title preview-title-param">{{ block.key }}</div>
            <div class="preview-content preview-param-content">{{ block.value }}</div>
          </template>
          
          <template v-else-if="block.blockType === 'image'">
            <div class="preview-title preview-title-image"> {{ block.name }}</div>
            <div class="preview-content preview-image-content">
              <el-image :src="block.url" :preview-src-list="[block.url]" fit="cover" class="preview-image-inline" />
            </div>
          </template>
        </div>
      </div>

      <!-- 空态展示 -->
      <el-empty v-if="allOrderedBlocks.length === 0" description="暂无内容" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, defineProps } from 'vue';
import { ConfigItem } from '@/services/universalDocService';

interface DocumentBlock {
  type: string;
  title: string;
  content: string;
  rows: number;
  createdAt: number;
}

interface ParameterBlock {
  key: string;
  value: string;
  createdAt: number;
}

interface ImageBlock {
  url: string;
  name: string;
  createdAt: number;
}

// 定义合并后的区块类型
type DocumentBlockWithType = DocumentBlock & { blockType: 'document' };
type ParameterBlockWithType = ParameterBlock & { blockType: 'parameter' };
type ImageBlockWithType = ImageBlock & { blockType: 'image' };
type CombinedBlock = DocumentBlockWithType | ParameterBlockWithType | ImageBlockWithType;

interface ToolItem {
  id: string;
  name: string;
  description: string;
}

const props = defineProps({
  configData: {
    type: Object as () => ConfigItem,
    required: true
  },
  parameterBlocks: {
    type: Array as () => ParameterBlock[],
    required: true
  },
  documentBlocks: {
    type: Array as () => DocumentBlock[],
    required: true
  },
  imageBlocks: {
    type: Array as () => ImageBlock[],
    required: true
  },
  selectedTools: {
    type: Array as () => string[],
    default: () => []
  },
  toolList: {
    type: Array as () => ToolItem[],
    default: () => []
  },
  editorContent: {
    type: String,
    default: ''
  }
});

// 获取工具名称
const getToolName = (toolId: string): string => {
  const tool = props.toolList.find(t => t.id === toolId);
  return tool ? tool.name : toolId;
};

// 按创建时间排序的所有区块
const allOrderedBlocks = computed<CombinedBlock[]>(() => {
  const allBlocks: CombinedBlock[] = [
    ...props.documentBlocks.map(block => ({
      ...block,
      blockType: 'document' as const
    })),
    ...props.parameterBlocks.map(block => ({
      ...block,
      blockType: 'parameter' as const
    })),
    ...props.imageBlocks.map(block => ({
      ...block,
      blockType: 'image' as const
    }))
  ];
  
  return allBlocks.sort((a, b) => a.createdAt - b.createdAt);
});
</script>

<style scoped>
.document-preview-tools {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding-right: 10px;
}

.document-preview-content {
  height: 100%;
  background: #f9fafb;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

.preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 2px solid #e5e7eb;
}

.document-name-preview {
  font-size: 22px;
  margin: 0;
  color: #111827;
  font-weight: 600;
}

.preview-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.preview-blocks {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.preview-block {
  margin-bottom: 16px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  background: white;
}

.preview-block:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.12);
}

.preview-title {
  padding: 12px 16px;
  font-weight: 600;
  position: relative;
}

.preview-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
}

.preview-title-h1 {
  font-size: 18px;
  color: #1e40af;
  background: #eff6ff;
}

.preview-title-h1::before {
  background-color: #3b82f6;
}

.preview-title-h2 {
  font-size: 17px;
  color: #065f46;
  background: #ecfdf5;
}

.preview-title-h2::before {
  background-color: #10b981;
}

.preview-title-h3 {
  font-size: 16px;
  color: #92400e;
  background: #fffbeb;
}

.preview-title-h3::before {
  background-color: #f59e0b;
}

.preview-title-h4 {
  font-size: 15px;
  color: #9f1239;
  background: #fff1f2;
}

.preview-title-h4::before {
  background-color: #f43f5e;
}

.preview-title-param {
  font-size: 15px;
  color: #4338ca;
  background: #eef2ff;
}

.preview-title-param::before {
  background-color: #6366f1;
}

.preview-title-image {
  font-size: 15px;
  color: #7e22ce;
  background: #f5f3ff;
}

.preview-title-image::before {
  background-color: #a855f7;
}

.preview-content {
  padding: 16px;
  white-space: pre-wrap;
  line-height: 1.6;
  color: #374151;
  background: white;
}

.preview-param-content {
  font-family: monospace;
  font-size: 14px;
  background: #f9fafb;
  border-radius: 4px;
  padding: 12px;
  margin: 0 16px 16px;
}

.preview-image-content {
  display: flex;
  justify-content: center;
  padding: 16px;
}

.preview-image-inline {
  max-width: 100%;
  max-height: 300px;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
</style>